<template>
	<view class="matbox">
		<view style="text-align: center;" v-if="list.length <= 0" class="intext">--暂无数据--</view>
		<view v-for="(item,index) in list" :key="index">
			<view class="matbxo">
				<view class="matit">
					<view class="">{{item.name}}</view>
					<view class="" style="color: #10c696;" @click="gotoxq(item)">查看详情</view>
				</view>
				<view class="matet">
					<view class="">报名时间： {{item.regist_start_time_text}}至{{item.regist_end_time_text}}</view>
					<view class="">组队方式： 自由组队（{{item.people_num}}人）</view>
					<view v-if="item.is_free==1" class="">报名方式： 免费  <text style="color: red;" @click="gotobaom(item)"> 报名参与>></text></view>
					<view v-else-if="item.is_free==2" class="">报名方式： 收费  <text style="color: red;" @click="gotobaom(item)"> 报名参与>></text></view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import { ref,onMounted } from 'vue'
	import {onReachBottom} from '@dcloudio/uni-app'
import request from '../../utils/request';
let token=ref('')
let list=ref([])

let page = ref(1)
let last_page = ref(1)
	
onMounted(()=>{
	token.value=uni.getStorageSync('token')
	getData()
})

onReachBottom(() => {
	if(page.value == last_page.value){
		uni.$u.toast('已经是最后一页了')
	}else{
		page.value++
		getData()
	}
})

const getData = () => {
	if (page.value == 1) {
		list.value = []
	}
	request.post('Competitions/index',
	{data:{
		page: page.value,
		page_size:15
	},
	header:{
		"token":token.value
	}}).then(res=>{
		last_page.value = res.data.last_page
		if (res.code == 1) {
			res.data.data.forEach((item,index) => {
				list.value.push(item)
			})
		} else {
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
		}
	}).catch(err=>{
		console.log(err);
	})
}

	const gotobaom=(item)=>{
		const id=item.id
		uni.navigateTo({
			 url:`/pages/myteam/myteam?id=${id}`
		})
	}
	const gotoxq=(item)=>{
		const id=item.id
		uni.navigateTo({
			url:`/pages/check/check?id=${id}`
		})
	}
</script>

<style scoped>
	.matbox{
		width: 100%;
		height: 100vh;
		background-color: #f8f8f8;
		padding-top: 20rpx;
	}
	.matbxo{
		width: 710rpx;
		height: 330rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 auto;
		box-sizing: border-box;
		box-shadow: 0 0 16px -9px rgba(0,0,0,.3);
	}
	.matit{
		width: 650rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
		font-size: 14px;
		justify-content: space-between;
		margin: 0 auto;
		border-bottom: 1px solid #e6e6e6;
	}
	.matet{
		font-size: 12px;
		padding-top: 56rpx;
		padding-left: 46rpx;
	}
</style>
